Resize the browser to match VNC session #1849

XiaoXianNv-boot · 2024-04-11T22:53:31Z

I've added a new zoom mode that allows the browser to automatically adapt to the window .
Just need to use window.open('vnc. html/?token=token&autoconnect=1&resize=browser','_blank','toolbar=no,location=no,status=no,menubar=no,resizable=yes,width=800,height=420'); Open a window
Works fine on EDGE

CendioOssman · 2024-04-16T07:20:24Z

Thank you for your contribution!

I'm thinking this might be a bit too niche, though, since it only works under very specific circumstances. Could you describe your setup a bit more, and where this feature fits in?

XiaoXianNv-boot · 2024-04-17T02:44:22Z

Used to open the QEMU/KVM console in a new browser window, yes, QEMU/KVM will constantly change the resolution when it is launched

XiaoXianNv-boot · 2024-04-17T02:47:02Z

I'm connected to the VNC port of KVM/QEMU via websockify

XiaoXianNv-boot · 2024-04-17T02:56:30Z

Browser APIs used: https://developer.mozilla.org/en-US/docs/Web/API/Window/resizeBy

CendioOssman

Okay. That sounds reasonble. I'm cautious about adding niche stuff to the general UI, though.

In TigerVNC, we have a similar behaviour but without a setting. Perhaps that could be used here as well?

The principle there is that it will resize the local window if the sizes match before the resize, but not if they are different. I.e.

VNC session is 1024x768, local window is 1024x768. VNC session resizes to 1920x1080, and the local window tries to resize to the same 1920x1080.
VNC session is 1024x768, but local window is 800x600. VNC session resizes to 1920x1080, but the local window stays at 800x600.

CendioOssman · 2024-08-08T11:43:14Z

@XiaoXianNv-boot, are you interested in looking at the suggested changes?

XiaoXianNv-boot · 2024-08-16T12:42:51Z

@XiaoXianNv-boot, are you interested in looking at the suggested changes?

YES

XiaoXianNv-boot · 2024-08-16T15:38:11Z

Okay. That sounds reasonble. I'm cautious about adding niche stuff to the general UI, though.

In TigerVNC, we have a similar behaviour but without a setting. Perhaps that could be used here as well?

The principle there is that it will resize the local window if the sizes match before the resize, but not if they are different. I.e.

VNC session is 1024x768, local window is 1024x768. VNC session resizes to 1920x1080, and the local window tries to resize to the same 1920x1080.

VNC session is 1024x768, but local window is 800x600. VNC session resizes to 1920x1080, but the local window stays at 800x600.

I have added adjustment rules now. Meet automatic adjustment in the following circumstances

The first adjustment size after setting this mode
The size of the current browser window is the size of the previous adjustment

If the above requirements are not met, the size of the browser will be disabled.
After adjusting to other modes, you can re -enable this mode (View Rules 1)

CendioOssman

Looks like a good step in the right direction. But I think some more adjustments are needed to get a good fit.

Please have a look and see the comments.

CendioOssman · 2024-08-19T08:33:34Z

vnc.html

@@ -171,6 +171,7 @@ <h1 class="noVNC_logo" translate="no"><span>no</span><br>VNC</h1>
                            <option value="off">None</option>
                            <option value="scale">Local Scaling</option>
                            <option value="remote">Remote Resizing</option>
+                            <option value="browser" disabled="" id="noVNC_setting_browser_resize">Resizing browser</option>


I don't think we need a new setting for this. This should be possible to have active as long as things aren't configured to "scale".

CendioOssman · 2024-08-19T08:36:02Z

core/rfb.js

@@ -2863,10 +2879,36 @@ export default class RFB extends EventTargetMixin {
                                             this._fbWidth, this._fbHeight);
    }

+    _updateBrowserWindows(width, height) {


The RFB object isn't really aware of things outside of its container. So I think these things are better placed in the UI object.

That means it needs some more information, though. We require width and height read-only properties on the RFB object. And we also need a resize event to be fired.

CendioOssman · 2024-08-19T08:38:21Z

core/rfb.js

+            if (bodyWidthBrowserResize === document.body.clientWidth &&
+                bodyHeightBrowserResize === document.body.clientHeight) {
+                OldResolutionEqual = true;
+            }


I'm not sure if this gives the desired behaviour. What we want to compare with is _fbWidth and _fbHeight just before the resize, and see if they match the browser window.

This code might still be doing that, but it's not obvious that it does.

CendioOssman · 2024-09-05T07:15:41Z

It looks like this was closed accidentally, @XiaoXianNv-boot?

XiaoXianNv-boot · 2024-09-05T16:18:11Z

看起来这是意外关闭的，？

YES

XiaoXianNv-boot · 2024-10-04T11:43:17Z

What is the situation

CendioOssman · 2024-10-08T07:57:38Z

core/rfb.js

+    set resizeBrowser(void_) {
+        this._resizeBrowser = void_;
+        if (this._resizeBrowser && (this._rfbConnectionState === 'connected')) {
+            this._resizeBrowser(this._fbWidth, this._fbHeight);


Callbacks are not that flexible. Please use a CustomEvent like we do for other things in the RFB object.

CendioOssman · 2024-10-08T07:58:40Z

core/rfb.js

@@ -2875,6 +2884,10 @@ export default class RFB extends EventTargetMixin {
        this._fbWidth = width;
        this._fbHeight = height;

+        if (this._resizeBrowser) {
+            this._resizeBrowser(width, height);
+        }


It's probably best if this happens last, so that all state is properly updated.

CendioOssman · 2024-10-08T07:59:53Z

NewWindow.html

+<html lang="en">
+<head>
+    <title>noVNC</title>
+</head>


Although an example is useful, I don't think we want another HTML file to maintain. I think it is sufficient with some information in the documentation somewhere.

CendioOssman · 2024-10-08T08:01:36Z

app/ui.js

@@ -1058,6 +1084,12 @@ const UI = {
        UI.rfb.clipViewport = UI.getSetting('view_clip');
        UI.rfb.scaleViewport = UI.getSetting('resize') === 'scale';
        UI.rfb.resizeSession = UI.getSetting('resize') === 'remote';
+        if (UI.getSetting('resize') === 'off') {


It should be relevant for 'remote' as well, I think?

CendioOssman · 2024-10-08T08:02:25Z

app/ui.js

+            UI.rfb.resizeBrowser = UI._updateBrowserWindows;
+        } else {
+            UI.rfb.resizeBrowser = false;
+        }


It might be simpler to always have the callback registered, and check the setting once the callback fires?

CendioOssman · 2024-10-08T08:05:01Z

app/ui.js

+
+        let OldResolutionEqual = false;
+        if (UI.bodyWidthBrowserResize === document.body.clientWidth &&
+            UI.bodyHeightBrowserResize === document.body.clientHeight) {


Again, this is a very roundabout way of checking things. Why not compare with the previous VNC session size?

CendioOssman · 2024-10-08T08:05:35Z

app/ui.js

+        if (UI.bodyHeightBrowserResize === 0 ||
+            OldResolutionEqual) {
+            if ((width != 0) && (height != 0)) {
+                window.resizeBy(width - bodyWidth, height - bodyHeight);


Why not resizeTo() and avoid having to calculate things?

CendioOssman requested changes May 16, 2024

View reviewed changes

samhed added the feature label May 17, 2024

XiaoXianNv-boot requested a review from CendioOssman August 16, 2024 15:41

CendioOssman requested changes Aug 19, 2024

View reviewed changes

samhed changed the title ~~New zoom mode to resize the browser~~ Resize the browser to match VNC session Aug 19, 2024

XiaoXianNv-boot force-pushed the master branch from 4e06e27 to d061b8b Compare September 5, 2024 01:16

XiaoXianNv-boot closed this Sep 5, 2024

XiaoXianNv-boot force-pushed the master branch from 77ff1d9 to 96c76f7 Compare September 5, 2024 02:18

XiaoXianNv-boot added 3 commits September 5, 2024 16:03

Added resize browser mode

94021a7

Dealing with Lint issues

1f6913b

Dealing with Lint issues

9edae1d

XiaoXianNv-boot reopened this Sep 5, 2024

XiaoXianNv-boot requested a review from CendioOssman September 7, 2024 01:31

CendioOssman requested changes Oct 8, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Resize the browser to match VNC session #1849

Resize the browser to match VNC session #1849

XiaoXianNv-boot commented Apr 11, 2024

CendioOssman commented Apr 16, 2024

XiaoXianNv-boot commented Apr 17, 2024

XiaoXianNv-boot commented Apr 17, 2024

XiaoXianNv-boot commented Apr 17, 2024

CendioOssman left a comment

CendioOssman commented Aug 8, 2024

XiaoXianNv-boot commented Aug 16, 2024

XiaoXianNv-boot commented Aug 16, 2024

CendioOssman left a comment

CendioOssman Aug 19, 2024

CendioOssman Aug 19, 2024

CendioOssman Aug 19, 2024

CendioOssman commented Sep 5, 2024

XiaoXianNv-boot commented Sep 5, 2024

XiaoXianNv-boot commented Oct 4, 2024

CendioOssman Oct 8, 2024

CendioOssman Oct 8, 2024

CendioOssman Oct 8, 2024

CendioOssman Oct 8, 2024

CendioOssman Oct 8, 2024

CendioOssman Oct 8, 2024

CendioOssman Oct 8, 2024

Resize the browser to match VNC session #1849

Are you sure you want to change the base?

Resize the browser to match VNC session #1849

Conversation

XiaoXianNv-boot commented Apr 11, 2024

CendioOssman commented Apr 16, 2024

XiaoXianNv-boot commented Apr 17, 2024

XiaoXianNv-boot commented Apr 17, 2024

XiaoXianNv-boot commented Apr 17, 2024

CendioOssman left a comment

Choose a reason for hiding this comment

CendioOssman commented Aug 8, 2024

XiaoXianNv-boot commented Aug 16, 2024

XiaoXianNv-boot commented Aug 16, 2024

CendioOssman left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CendioOssman commented Sep 5, 2024

XiaoXianNv-boot commented Sep 5, 2024

XiaoXianNv-boot commented Oct 4, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment